<i18n locale="zh-CN" lang="yaml">
Select a file: 选择文件
Data imported: 数据已导入
Importing: 即将导入
Imported contents do not include sensitive data (such as password), please re-entered them after import: 导入内容不包含敏感数据，请在导入后重新输入
Drag and drop the file here, or click here to upload: 将文件拖到此处，或点击此处上传

Imported Script Set requires 3rd party packages, do you want to open PIP tool now?: 导入的脚本集需要第三方包，是否现在前往 PIP 工具？
</i18n>

<!-- Generated by OpenCC START -->
<i18n locale="zh-HK" lang="yaml">
Data imported: 數據已導入
Drag and drop the file here, or click here to upload: 將文件拖到此處，或點擊此處上傳
Imported Script Set requires 3rd party packages, do you want to open PIP tool now?: 導入的腳本集需要第三方包，是否現在前往 PIP 工具？
Imported contents do not include sensitive data (such as password), please re-entered them after import: 導入內容不包含敏感數據，請在導入後重新輸入
Importing: 即將導入
Select a file: 選擇文件
</i18n>
<i18n locale="zh-TW" lang="yaml">
Data imported: 資料已匯入
Drag and drop the file here, or click here to upload: 將檔案拖到此處，或點選此處上傳
Imported Script Set requires 3rd party packages, do you want to open PIP tool now?: 匯入的指令碼集需要第三方包，是否現在前往 PIP 工具？
Imported contents do not include sensitive data (such as password), please re-entered them after import: 匯入內容不包含敏感資料，請在匯入後重新輸入
Importing: 即將匯入
Select a file: 選擇檔案
</i18n>
<!-- Generated by OpenCC END -->

<template>
  <el-dialog
    id="ScriptSetSetup"
    :visible.sync="show"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="750px">

    <template slot="title">
      {{ $t('Script Set Import') }}
    </template>

    <el-container direction="vertical">
      <el-main>
        <div class="setup-form">
          <el-form ref="form" label-width="135px">
            <el-form-item :label="$t('Select a file')" prop="upload">
              <el-upload drag ref="upload" :class="uploadAreaBorderClass"
                :limit="2"
                :multiple="false"
                :auto-upload="false"
                :show-file-list="false"
                accept=".zip"
                :http-request="handleUpload"
                :on-change="onUploadFileChange">
                <i class="fa" :class="uploadAreaIconClass"></i>
                <div class="el-upload__text">{{ $t(uploadAreaIconText) }}</div>
              </el-upload>
              <InfoBlock type="warning" :title="$t('Imported contents do not include sensitive data (such as password), please re-entered them after import')" />
            </el-form-item>

            <el-form-item class="setup-footer">
              <el-button type="primary" v-prevent-re-click :disabled="disableUpload" @click="submitData">{{ $t('Import') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>

      <el-dialog
        :title="$t('Importing')"
        :visible.sync="showConfirm"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="true"
        width="750px">
        <span class="import-info-dialog-content">
          <template v-if="importInfo && importInfo.diff">
            <template v-for="t in C.IMPORT_DATA_TYPE">
              <template v-if="T.notNothing(importInfo.diff[t.key])">
                <el-divider content-position="left"><h1>{{ t.name }}</h1></el-divider>
                <el-table :data="importInfo.diff[t.key]"
                  :show-header="false">
                  <el-table-column width="180" align="center">
                    <template slot-scope="scope">
                      <strong :class="DIFF_TYPE_MAP[scope.row.diffType].class">
                        <i class="fa" :class="DIFF_TYPE_MAP[scope.row.diffType].icon"></i>
                        {{ $t(scope.row.diffType) }}
                      </strong>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot-scope="scope">
                      <span>{{ scope.row[t.showField] || scope.row.id }}</span>
                      <code class="entity-id code-font">{{ $t('(') }}ID: {{ scope.row.id }}{{ $t(')') }}</code>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </template>
          </template>

          <template v-if="importInfo && importInfo.note">
            <el-divider content-position="left"><h1>{{ $t('Note') }}</h1></el-divider>
            <pre class="import-note">{{ importInfo.note }}</pre>
          </template>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showConfirm = false">{{ $t('Cancel') }}</el-button>
          <el-button type="primary" v-prevent-re-click @click="confirmImport" :loading="isImporting">
            {{ $t('Confirm') }}
          </el-button>
        </span>
      </el-dialog>
    </el-container>
  </el-dialog>
</template>

<script>
export default {
  name: 'ScriptSetImport',
  components: {
  },
  watch: {
    show(val) {
      if (!val) {
        this.$root.$emit('reload.scriptSetImportHistoryList');
      }
    },
    showConfirm(val) {
      if (val === false) {
        this.initFilePreview();
      }
    },
  },
  methods: {
    async loadData() {
      this.show = true;
    },
    async submitData() {
      return await this.$refs.upload.submit();
    },
    async handleUpload(req) {
      let bodyData = new FormData();
      bodyData.append('checkOnly', true);
      bodyData.append('files', req.file);

      let apiRes = await this.T.callAPI('post', '/api/v1/script-sets/do/import', {
        body: bodyData,
      });
      if (!apiRes.ok) {
        return this.alertOnError(apiRes);
      }

      this.importInfo = apiRes.data;

      // Show confirm dialog
      this.showConfirm = true;
    },
    async confirmImport() {
      this.isImporting = true;
      let apiRes = await this.T.callAPI('post', '/api/v1/script-sets/do/confirm-import', {
        body    : { confirmId: this.importInfo.confirmId },
        feedback: { okMessage: this.$t('Data imported') },
      });
      this.isImporting = false;
      if (!apiRes.ok) {
        return this.alertOnError(apiRes);
      }

      this.showConfirm = false;
      this.show        = false;

      if (this.T.notNothing(apiRes.data.requirements)) {
        if (await this.T.confirm(this.$t('Imported Script Set requires 3rd party packages, do you want to open PIP tool now?'))) {
          return this.common.goToPIPTools(apiRes.data.requirements);
        }
      }
    },
    alertOnError(apiRes) {
      if (apiRes.ok) return;

      this.initFilePreview();
    },
    initFilePreview() {
      this.$refs.upload.clearFiles();

      this.uploadAreaBorderClass = [];
      this.uploadAreaIconClass   = ['fa-cloud-upload'];
      this.uploadAreaIconText    = 'Drag and drop the file here, or click here to upload';
    },
    showFilePreview(filename) {
      this.uploadAreaBorderClass = ['upload-area-active'];
      this.uploadAreaIconClass   = ['fa-cloud-upload', 'text-main'];
      this.uploadAreaIconText    = filename;
    },
    onUploadFileChange(file, fileList) {
      if (fileList.length > 1) fileList.splice(0, 1);

      this.disableUpload = (fileList.length <= 0);
      if (this.disableUpload) {
        this.initFilePreview();
      } else {
        this.showFilePreview(fileList[0].name);
      }
    },
  },
  computed: {
    DIFF_TYPE_MAP() {
      return {
        add: {
          icon : 'fa-plus',
          class: 'text-good',
        },
        replace: {
          icon : 'fa-refresh',
          class: 'text-bad',
        }
      }
    },
  },
  props: {
  },
  data() {
    return {
      show: false,

      scriptSetMap: {},

      uploadAreaBorderClass: [],
      uploadAreaIconClass  : ['fa-cloud-upload'],
      uploadAreaIconText   : 'Drag and drop the file here, or click here to upload',

      disableUpload: true,
      showConfirm  : false,
      isImporting  : false,

      importInfo: {},
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.el-upload-dragger.upload-area-active {
  border-color: var(--primary) !important;
}
</style>
<style scoped>
.import-note {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-size: 16px;
  padding-left: 65px;
}
.entity-id {
  opacity: .7;
  font-size: 12px;
}
</style>
